<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #max{
            display: flex;
            justify-items: center;
        }
        #div1{
            display: flex;
            align-content: center;
        }
    </style>
</head>
<body>
<form action="app.php" method="post" enctype="multipart/form-data">

    请选择头像：
    <input type="file"  name="file" id="file" multiple="multiple" onchange="showImg1()">
    <br />
    <img src="" id="showImg" width="100px" height="100px">
    <br />
    姓名：<input type="text" name="userName" id="" value="" />
    <br />
    性别：<input type="radio" name="sex" id="" value="男" />男
    <input type="radio" name="sex" id="" value="女" />女
    <br />
    特长：
    <input type="checkbox" name="hobby[]" id="" value="Python" />Python
    <input type="checkbox" name="hobby[]" id="" value="JavaScript" />JavaScript
    <input type="checkbox" name="hobby[]" id="" value="Java" />Java
    <input type="checkbox" name="hobby[]" id="" value="C#" />C#
    <input type="checkbox" name="hobby[]" id="" value="SQL" />SQL
    <br />
    意向城市：<select name="city">
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="深圳">深圳</option>
        <option value="杭州">杭州</option>
    </select>
    <br />
    <div id="max">
        <div id="div1">自我介绍：</div>
        <div>
            <textarea rows="10" cols="25" name="self">
		    </textarea>
        </div>

    </div>

    <input type="submit" id="" value="更新" />
</form>
</body>
<script>
    var fileObj = document.getElementById('file');
    function showImg1() {

        var files = fileObj['files'];
        var URL = window.URL || window.webkitURL;
        var imgURL = URL.createObjectURL(files[0]);
        document.getElementById('showImg').src = imgURL;
    }
</script>
</html>


